<template>
 <div class="icons" >
     <swiper :options="swiperOption">
         <swiper-slide v-for="(page,index) of pages" :key="index">
             <div class="icon-item" v-for="item of page":key="item.id">
                <div class="icon-img">
                    <img  class="icon-img-content" :src="item.imgUrl" alt="">
                </div>       
                <p class="icon-desc">{{item.desc}}</p>
            </div>
         </swiper-slide>       
     </swiper>
 </div>
</template>
<script>
 export default {
   name:"homeIcon",
   data () {
     return {
           swiperOption:{
             autoPlay:false
         }
     
     }
   },
   props:{
       iconList:Array
   },
   computed:{
       pages(){
           const pages=[]
           this.iconList.forEach((item,index)=>{
               const page=Math.floor(index/8)
               if(!pages[page]){
                  pages[page]=[]
               }
                pages[page].push(item)
           })
           return pages
       }
   },
   components: {
   }
 }
</script>
<style lang="stylus" scoped>
@import "~styles/varibles.styl";
@import "~styles/mixins.styl";
    .icons >>> .swiper-container
        height: 0
        padding-bottom: 50% 
    .icons
        margin-top .1rem     
        .icon-item
            float left
            overflow hidden         
            width 25%
            padding-bottom 25%
            position relative
            .icon-img
                position absolute
                left 0
                top 0
                right 0
                bottom .44rem
                box-sizing border-box
                .icon-img-content
                    height 100%
                    display block
                    margin 0 auto
            .icon-desc
                position absolute
                bottom 0
                left 0
                right 0
                color $textDarkColor
                height .44rem
                line-height .44rem
                text-align center
                ellipsis()                       
</style>


